<template>
  <div class="diray-share-header">
    <div
      :class="{
        'diray-share-header-item': curShareType !== shareGive,
        'diray-share-header-item-select': curShareType === shareGive,
      }"
      @click="handleSwitchShare(shareGive)"
    >
      共享给我 ({{ notReadNum }})
    </div>
    <div
      :class="{
        'diray-share-header-item': curShareType !== shareSend,
        'diray-share-header-item-select': curShareType === shareSend,
      }"
      @click="handleSwitchShare(shareSend)"
    >
      我的共享
    </div>
  </div>
  <div v-if="curShareType === shareGive">
    <diray-share-give @noReadShare="changeNoRead" />
  </div>
  <div v-if="curShareType === shareSend">
    <diray-share-send />
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import { HOME_DIRAY_SHARE_GIVE, HOME_DIRAY_SHARE_SEND } from '@/helper/constant';
  import DirayShareGive from '@/views/board-home/components/diray-share-give.vue';
  import DirayShareSend from '@/views/board-home/components/diray-share-send.vue';
  export default defineComponent({
    name: 'DirayShare',
    components: { DirayShareGive, DirayShareSend },
    setup() {
      const state = reactive({
        curShareType: HOME_DIRAY_SHARE_GIVE, //当前共享方式
        shareGive: HOME_DIRAY_SHARE_GIVE, //共享给我,
        shareSend: HOME_DIRAY_SHARE_SEND, //我的共享
        notReadNum: 0, //分享给我未读的数量
      });
      const methods = {
        handleSwitchShare(shareType) {
          state.curShareType = shareType;
        },
        changeNoRead(notReadNum) {
          //改变未读数量
          state.notReadNum = notReadNum;
        },
      };
      onMounted(() => {});
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .diray-share-header {
    width: 100%;
    height: 32px;
    padding: 0 26px;
    margin: 10px 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    .diray-share-header-item {
      font-size: 14px;
      color: #a9aba9;
      cursor: pointer;
    }
    .diray-share-header-item:hover {
      color: @primary-color;
    }
    .diray-share-header-item-select {
      padding: 4px 10px;
      background-color: @je-menu-item-active-bg;
      border: 1px solid @je-menu-item-active-bg;
      color: @primary-color;
      border-radius: 8px;
      box-sizing: border-box;
    }
  }
</style>
